<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery/jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;

        }

        .smallImg,
        .bigImg {
            width: 400px;
            height: 400px;
            position: absolute;
        }

        .bigImg {
            left: 410px;
            top: 0;
            overflow: hidden;
            display: none;
        }

        .smallImg img {
            width: 400px;
            height: 400px;

        }

        .bigImg img {
            width: 1000px;
            height: 1000px;
            position: absolute;
        }

        /* 放大镜  大图小图的倍数 */
        .box {
            width: 160px;
            height: 160px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
    </style>
</head>

<body>

    <div class="smallImg"><img src="./images/123.png" alt="">
        <div class="box"></div>
    </div>
    <div class="bigImg"><img src="./images/123.png" alt=""></div>

</body>
<script>

    // 鼠 标进入小图  显示大图
    $(".smallImg").mousemove(function () {
        $(".box").css("display", "block");
        $(".bigImg").css("display", "block");

    })

    //  鼠标 移出 隐藏
    $(".smallImg").mouseout(function () {
        $(".box").css("display", "none");
        $(".bigImg").css("display", "none");

    })


    //  鼠标在 小图移动时
    $(".smallImg").mousemove(function (e) {
        //  鼠标当前的位置  相对于文档
        var pageX = e.pageX;
        var pageY = e.pageY;

        //  小图片 到窗口 的距离
        var offsetX = $(".smallImg").offset().left;
        var offsetY = $(".smallImg").offset().top;

        //  鼠标 在小图片的的相对位置
        var relativeX = pageX - offsetX;
        var relativeY = pageY - offsetY;
        //  计算鼠标在放大镜中间的位置   鼠标应在放大镜中间   
        var boxOffsetX = $(".box").width() / 2;
        var boxOffsetY = $(".box").height() / 2;

        console.log(boxOffsetX,boxOffsetY);
        $(".box").css({ left: relativeX - boxOffsetX + 'px', top: relativeY - boxOffsetY + 'px' });

        //  获取 放大镜的的新位置
        var boxX = $('.box').position().left;
        var boxY = $('.box').position().top;
        // console.log(boxX, boxY);

        // 边界问题
        //   放大镜的最大移动距离
        var maxBoxX = $(".smallImg").width() - $(".box").width();
        var maxBoxY = $(".smallImg").height() - $(".box").height();
        //  左边
        if (boxX <= 0) {
            $(".box").css('left', '0px');
        }
        // 右边
        if (boxX >= maxBoxX) {
            $(".box").css('left', maxBoxX + 'px');
        }
        // 上边
        if (boxY <= 0) {
            $(".box").css('top', '0px');
        }
        // 下边
        if (boxY >= maxBoxY) {
            $(".box").css('top', maxBoxY + 'px');
        }
        //  大图与放大镜 相对应移动  大图片移动方向与鼠标相反
        var bigImgX = boxX * 2.5;
        var bigImgY = boxY * 2.5;
        
        $(".bigImg img").css({ left: -bigImgX + 'px', top: -bigImgY + 'px' })
    })

</script>

</html>